<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css/zoomer.css"
	media="screen" />
<meta http-equiv="Content-Language" content="fr" />

<title>Zoomer for jQuery</title>

<!--[if IE 6]>
	<style type="text/css" media="screen">
	ul.thumb li img.hover {
	margin-top:15px;
	background:url(thumb_bg.gif) no-repeat center center;
	border: none;
}
ul.thumb li .title{color:#fff;width:185px;height:50px;margin:0;font-weight:900;background:url(title.gif) no-repeat center center;padding:17px 0 0 0;text-align:center;}
	</style>
<![endif]-->
<link href="css/imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}


body {
	font: Arial, Helvetica, sans-serif normal 10px;
	margin: 0;
	padding: 0;
}

* {
	margin: 0;
	padding: 0;
}

#page {
	margin: 0 auto;
	position: relative;
	width: 850px;
	font-family: verdana;
	font-size: 12px;
}

#content {
	width: 100%;
}

pre {
	border: 3px solid #ccc;
	padding: 5px;
	font-size: 12px;
	font-family: arial;
}

.bold {
	font-weight: bold;
}

.blue {
	color: blue;
}

.red {
	color: red;
}

#footer {
	margin-top: 5px;
	text-align: center;
	width: 100%;
	height: auto;
	padding: 5px;
	background-color: #ccc;
}

#logo,#foot {
	margin-left: 10px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="javascripts/imgbubbles.js">

/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){
	$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
	$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>

</head>

<body>

<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="images/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="images/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="images/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="images/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="images/rss.png" alt="Add RSS Feed" /></a></li>
</ul>

<div id="page">
<center></center>
<br>
<br>
<br>
<div id="content">

<div class="container"><img id="logo" src="images/logo.jpg"></img>
<h4>1.75x magnification</h4>
<ul id="orbs" class="bubblewrap">
	<li><a href="http://dynamicdrive.com"><img
		src="orbs/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
	<li><a href="http://dynamicdrive.com"><img
		src="orbs/facebook.png" alt="Add to Facebook" /></a></li>
	<li><a href="http://dynamicdrive.com"><img src="orbs/digg.png"
		alt="Add to Digg" /></a></li>
	<li><a href="http://dynamicdrive.com"><img
		src="orbs/twitter.png" alt="Add to Twitter" /></a></li>
	<li><a href="http://dynamicdrive.com"><img src="orbs/rss.png"
		alt="Add RSS Feed" /></a></li>
</ul>

<img id="foot" src="images/footer.jpg"></img></div>




<!--</div>--> <script type="text/javascript"
	src="http://code.jquery.com/jquery-latest.js"></script> <script
	type="text/javascript" src="javascripts/zoomer.js"></script> <script
	type="text/javascript">
	$(document).ready(function() {
		$('ul.thumb li').Zoomer( {
			speedView : 200,
			speedRemove : 400,
			altAnim : true,
			speedTitle : 400,
			debug : false
		});
	});
</script> <a style="display: none" href="http://www.addyosmani.com">AddyOsmani.com</a>
</body>
</html>